<!-- 高性能的图片优化组件，专门用于提升网站图片加载性能和用户体验。
主要功能特性：
1. 自动检测WebP支持，并自动使用WebP格式
2. 支持图片懒加载，提升页面加载速度
3. 支持图片响应式，根据屏幕大小自动调整图片大小
4. 支持图片预加载，提升用户体验
5. 支持图片错误处理，提升用户体验
6. 支持图片加载状态显示，提升用户体验
7. 支持图片加载失败处理，提升用户体验 
-->
<template>
    <picture class="optimized-image" :class="{ 'lazy-loading': lazy && !loaded }">
        <!-- WebP格式（如果支持） -->
        <source v-if="webpSrc" :srcset="webpSrcset" :sizes="sizes" type="image/webp" />

        <!-- 原始格式作为回退 -->
        <img :src="src" :srcset="srcset" :sizes="sizes" :alt="alt" :width="width" :height="height"
            :loading="lazy ? 'lazy' : 'eager'" :class="imageClass" @load="onImageLoad" @error="onImageError"
            ref="imgRef" />

        <!-- 懒加载占位符 -->
        <div v-if="lazy && !loaded" class="image-placeholder">
            <div class="placeholder-spinner"></div>
        </div>
    </picture>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, watch } from 'vue'
import { imageOptimizer } from '../utils/imageOptimizer'

// 定义组件属性
interface Props {
    src: string
    webpSrc?: string
    alt: string
    width?: number
    height?: number
    lazy?: boolean
    sizes?: string
    srcset?: string
    webpSrcset?: string
    imageClass?: string
}

// 设置默认值
const props = withDefaults(defineProps<Props>(), {
    lazy: true,
    sizes: '(max-width: 640px) 100vw, (max-width: 960px) 50vw, 33.33vw',
    imageClass: ''
})

// 响应式数据
const loaded = ref(false)
const error = ref(false)
const imgRef = ref<HTMLImageElement>()

// 计算属性
const computedSrcset = computed(() => {
    if (props.srcset) return props.srcset
    return imageOptimizer.generateSrcset(props.src)
})

const computedWebpSrcset = computed(() => {
    if (props.webpSrcset) return props.webpSrcset
    if (props.webpSrc) {
        return imageOptimizer.generateSrcset(props.webpSrc)
    }
    return imageOptimizer.generateSrcset(imageOptimizer.generateWebPUrl(props.src))
})

const computedSizes = computed(() => {
    if (props.sizes) return props.sizes
    return imageOptimizer.generateSizes()
})

// 事件处理
const onImageLoad = () => {
    loaded.value = true
    error.value = false
}

const onImageError = () => {
    error.value = true
    console.warn(`Failed to load image: ${props.src}`)
}

// 生命周期
onMounted(async () => {
    // 检查WebP支持
    const supportsWebP = await imageOptimizer.checkWebPSupport()
    console.log('WebP支持:', supportsWebP ? '✅ 支持' : '❌ 不支持')

    // 如果不是懒加载，立即加载
    if (!props.lazy) {
        loaded.value = true
    }
})

// 监听src变化
watch(() => props.src, () => {
    loaded.value = false
    error.value = false
})
</script>

<style scoped lang="scss">
.optimized-image {
    position: relative;
    display: block;
    width: 100%;
    height: auto;

    img {
        width: 100%;
        height: auto;
        display: block;
        transition: opacity 0.3s ease;

        &.lazy-loading {
            opacity: 0;
        }
    }

    &.lazy-loading {
        min-height: 200px;
        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
        background-size: 200% 100%;
        animation: loading 1.5s infinite;
    }
}

.image-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f5f5f5;

    .placeholder-spinner {
        width: 40px;
        height: 40px;
        border: 3px solid #e0e0e0;
        border-top: 3px solid #6366f1;
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

// 响应式图片样式
@media (max-width: 640px) {
    .optimized-image {
        img {
            width: 100%;
        }
    }
}

@media (min-width: 641px) and (max-width: 960px) {
    .optimized-image {
        img {
            width: 50%;
        }
    }
}

@media (min-width: 961px) {
    .optimized-image {
        img {
            width: 33.33%;
        }
    }
}
</style>